<template>
  <div class="box zdz" v-if="type == 1">
    <div class="list">
      <div class="one">排名</div>
      <div class="two-s">开发商名称</div>
      <div class="three">开发商属性</div>
      <div class="flex jcc four">
        <div>保交楼项目数</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(1, 1)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(1, 2)" />
        </div>
      </div>
      <div class="flex jcc five">
        <div>贷款前正常施工项目</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(2, 1)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(2, 2)" />
        </div>
      </div>
      <div class="flex jcc six">
        <div>贷款前停工项目</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(3, 1)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(3, 2)" />
        </div>
      </div>
      <div class="seven flex jcc" :class="type == 2 ? 'seven' : 'sevens'">
        <div>网签备案率</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(4, 1)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(4, 2)" />
        </div>
      </div>
    </div>
    <div class="list" v-for="(item, index) in data" :ref="index">
      <div class="one">{{ ++index }}</div>
      <div class="two-s" @click="go(item.groupName)">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="item.groupName"
          placement="top"
        >
          {{item.groupName}}
        </el-tooltip>
      </div>
      <div class="three">{{ item.developersPropertyName }}</div>
      <div class="four">{{ item.projectCount }}</div>
      <div class="five">{{ item.normalProjectCount }}</div>
      <div class="six">{{ item.stopProjectCount }}</div>
      <div class="seven">{{ item.archivalProportion }}%</div>
    </div>
    <el-pagination
      layout="prev, pager, next"
      v-model:current-page="current"
      :page-size="PageSize"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
  <div class="box" v-if="type == 2">
    <div class="list">
      <div class="one">排名</div>
      <div class="twos">项目名称</div>
      <div class="threes">开发商名称</div>
      <div class="flex jcc fours">
        <div>保交楼套数</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(1, 1)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(1, 2)" />
        </div>
      </div>
      <div class="flex jcc fives">
        <div>交付套数</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(2, 1)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(2, 2)" />
        </div>
      </div>
      <div class="flex jcc sixs">
        <div>待交付套数</div>
        <div class="triangle">
          <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="sort(3, 1)" />
          <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="sort(3, 2)" />
        </div>
      </div>
      <div class="sevens">是否网签备案</div>
      <div class="eights">是否正常施工</div>
      <div class="nines">是否立案侦查</div>
      <div class="tens">项目位置</div>
    </div>
    <div class="list" v-for="(item, index) in data" :ref="index">
      <div class="one">{{ ++index }}</div>
      <div class="twos" @click="go(item.borrowXmId, item.projectName)">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="item.projectName"
          placement="top"
        >
          {{item.projectName}}
        </el-tooltip>
      </div>
      <div class="threes">{{ item.groupName }}</div>
      <div class="fours">{{ item.totalHouseCount }}</div>
      <div class="fives">{{ item.deliveryHouseCount }}</div>
      <div class="sixs">{{ item.notDeliveryHouseCount }}</div>
      <div class="sevens">{{ item.isArchival == 1 ? "是" : "否" }}</div>
      <div class="eights">{{ item.isNormalProject == 1 ? "是" : "否" }}</div>
      <div class="nines">{{ item.isScout == 1 ? "是" : "否" }}</div>
      <div class="tens">{{ item.projectAddress }}</div>
    </div>
    <el-pagination
      layout="prev, pager, next"
      v-model:current-page="current"
      :page-size="PageSize"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script setup>
import { selectEnterpriseProjectList, selectProjectList } from "@/api/bjBuilding";
import { ref, defineProps, onMounted, getCurrentInstance } from "vue";
const props = defineProps({
  useSelectCapitalInfoParms: {
    type: String,
    required: true,
  },
  type: {
    type: Number,
    required: true,
    default: 1,
  },
});
const data = ref(null);
var current; //当前页
const PageSize = ref(20); //每页显示数据
const total = ref(null); //总数据
let { proxy } = getCurrentInstance();
// 开发商/项目挪用预售资金排名
const useSelectCapitalInfo = async () => {
  if (props.type == 2) {
    await selectProjectList(props.useSelectCapitalInfoParms).then((res) => {
      if (res.code == 0) {
        data.value = res.data.records;
        current = res.data.current;
        total.value = res.data.total;
      }
    });
  } else if (props.type == 1) {
    await selectEnterpriseProjectList(props.useSelectCapitalInfoParms).then((res) => {
      if (res.code == 0) {
        data.value = res.data.records;
        current = res.data.current;
        total.value = res.data.total;
      }
    });
  }
};
// 分页
const handleCurrentChange = (newPage) => {
  props.useSelectCapitalInfoParms.pageNumber = newPage;
  useSelectCapitalInfo();
};

// 排序
const sort = (a, b) => {
  if (props.useSelectCapitalInfoParms.sortField == a && props.useSelectCapitalInfoParms.sortWay == b) return;
  props.useSelectCapitalInfoParms.sortField = a;
  props.useSelectCapitalInfoParms.sortWay = b;
  useSelectCapitalInfo();
};
// 调整详情
// 调整详情
const go = (bs, name) => {
  if (props.type == 1) {
    proxy.$goDetail(bs);
  } else {
    proxy.$goProDetail(bs, name);
  }
};
onMounted(() => {
  useSelectCapitalInfo();
});
</script>

<style scoped lang="less">
.box {
  padding: 15px 15px;
  height: 100%;
  position: relative;
  padding-bottom: 0px;
  box-sizing: border-box;
}
.box > div {
  // height: 21px;
}
.paging {
  position: absolute;
  bottom: 10px;
  right: 25px;
  font-size: 20px;
  font-weight: 400;
  color: #6a84d9;
}

.list {
  font-size: 16px;
  color: rgba(151, 171, 234, 1);
  text-align: center;
  display: flex;
  padding: 8px 0px;
}

.one {
  width: 50px;
}
.two-s {
  width: 150px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  text-align: left;
}
.twos {
  width: 80px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  text-align: left;
}
.two-s:hover {
  cursor: pointer;
}
.twos:hover {
  cursor: pointer;
}
.three {
  width: 100px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  padding-left: 10px;
}
.threes {
  width: 85px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  padding-left: 10px;
}
.four {
  width: 120px;
}
.fours {
  width: 95px;
}
.five {
  width: 180px;
}
.fives {
  width: 82px;
}

.six {
  width: 130px;
}
.sixs {
  width: 95px;
}
.seven {
  width: 120px;
  // margin: 0 auto
}
.sevens {
  width: 100px;
  // margin: 0 auto
}
.eights {
  width: 100px;
}
.nines {
  width: 100px;
}
.ten {
  width: 80px;
}

.list:nth-child(even) {
  //  background: rgba(16, 28, 51, 0.7);
  background: rgba(16, 28, 51, 0.7) !important;
}
.triangle {
  position: relative;
  left: 2px;
  top: 2px;
}
.list:not(:first-child) .twos {
  cursor: pointer;
}
::v-deep .el-pagination {
  position: absolute;
  right: 5px;
  bottom: 5px;
  li {
    background: rgba(7, 68, 153, 0);
  }
  button {
    background: rgba(7, 68, 153, 0);
  }
  .btn-prev {
    background: rgba(7, 68, 153, 0) !important;
  }
  .is-last {
    background: rgba(7, 68, 153, 0) !important;
  }
}
</style>
